<script setup>
// 引入 Element Plus 中的用户、锁图标
import { login } from '@/api/admin/user';
import { Lock, User } from '@element-plus/icons-vue';
import { reactive, onMounted, onBeforeUnmount, ref } from 'vue';
import { showMessage } from '@/composables/util'
import router from '@/router'
import { setToken } from '@/composables/auth'


// 定义响应式的表单对象
const form = reactive({
  username: '',
  password: ''
})

// 表单引用
const formRef = ref(null)
const loading = ref(false)
// 表单验证规则
const rules = {
  username: [
    {
      required: true,
      message: '用户名不能为空',
      trigger: 'blur'
    }
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: 'blur',
    },
  ]
}

// 按回车键后，执行登录事件
function onKeyUp(e) {
  console.log(e)
  if (e.key == 'Enter') {
    onSubmit()
  }
}
// 添加键盘监听
onMounted(() => {
  console.log('添加键盘监听')
  document.addEventListener('keyup', onKeyUp)
})

// 移除键盘监听
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onKeyUp)
})
const onSubmit = () => {
  // 省略...
  // 先验证 form 表单字段
  formRef.value.validate((valid) => {
    // 省略...

    // 开始加载
    loading.value = true

    // 调用登录接口
    login(form.username, form.password).then((res) => {

      console.log(res)
      // 判断是否成功
      if (res.success == true) {
        console.log("跳转")

        //    存储 Token 到 Cookie 中
        // let token = res.data.data.token
        let token = res.data.token;
        setToken(token)


        // 跳转到后台首页
        router.push('/admin/index')
      }
      // 省略...
    })
      .finally(() => {
        // 结束加载
        loading.value = false
      })
  })
}
</script>

<template>
  <!-- 使用 grid 网格布局，并指定列数为 2，高度占满全屏 -->
  <div class="grid grid-cols-2 h-screen">
    <!-- 默认先适配移动端，占两列，order 用于指定排列顺序，md 用于适配非移动端（PC 端）；背景色为黑色 -->
    <div class="col-span-2 order-2 p-10 md:col-span-1 md:order-1 bg-black">
      <div class="flex justify-center items-center h-full flex-col">
        <h2 class="font-bold text-4xl mb-7 text-white">We博客登录</h2>
        <p class="text-white">一款由 Spring Boot + Mybaits Plus + Vue 3.2 + Vite 4 开发的前后端分离博客。</p>
        <img src="@/assets/About%20us%20page-amico.png" class="w-1/2 animate__animated animate__fadeInLeft
">

      </div>

    </div>
    <div class="col-span-2 order-1 md:col-span-1 md:order-2 bg-white animate__animated animate__bounceInRight animate__fast
">
      <div class="flex justify-center items-center h-full flex-col gap-0.5">
        <h1 class="font-bold text-4xl mb-5">欢迎回来</h1>
        <div class="flex items-center justify-center mb-7 text-gray-400 space-x-2">
          账号密码登录
        </div>
        <el-form class="w-5/6 md:w-2/5" ref="formRef" :rules="rules" :model="form">
          <el-form-item>
            <!--            输入框组件-->
            <el-input size="large" placeholder="请输入用户名" v-model="form.username" :prefix-icon="User"
              clearable></el-input>
          </el-form-item>
          <el-form-item>
            <!-- 密码框组件 -->
            <el-input size="large" type="password" placeholder="请输入用户名" v-model="form.password" :prefix-icon="Lock"
              clearable />
          </el-form-item>
          <el-form-item>
            <!-- 登录按钮，宽度设置为 100% -->
            <el-button class="w-full" size="large" type="primary" @click="onSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped></style>